<template>
  <div class="all">
   <div class="topHalf">
    <div class="top">志愿者服务平台
     </div>
     <div class="body">
    <div class="tow">
    <div class="details">
      <img src="../img/downloaded-image.jpg" alt="" class="mg1">
      <input type="button" value="王开凿" class="my">
      <div class="g2">
      <img src="../img/jianto.png" alt="" class="mg2" @click="btnProfile">
      </div>
    </div>
    <div class="taskList">
      <div class="AllList">
        <div><img src="../img/rl.png" alt="" @click="btnDetail">
        <span>认领活动</span>
        </div>
        <div><img src="../img/baobiao.png" alt="">
        <span>爱心报表</span>
        </div>
        <div><img src="../img/liebiao2.png" alt="">
        <span>服务纪实</span>
        </div>
        <div><img src="../img/my.png" alt="">
        <span>我的服务</span>
        </div>
      </div>
    </div>
    </div>
  </div>
    </div>
    <div class="contents">
  <div class="content">
    <div class="top2">
      <div><span class="title">志愿活动</span></div>
      <div class="ck">
        <input type="button" value="查看更多" class="gd">
        <img src="../img/jianto.png" alt="查看更多" class="mg3" @click="btnList">
      </div>
    </div>
    <div class="activity-info">
      <img src="../img/公益.png" alt="公益活动" class="gy">
      <div class="detail">
        <p><strong>活动地点：</strong>北京市海淀区中关村街道</p>
        <p><strong>活动时间：</strong>2025年5月23日 09:00-17:00</p>
        <p><strong>活动内容：</strong></p>
        <ul>
          <li>社区环境清洁与美化</li>
          <li>老年人智能手机使用教学</li>
          <li>垃圾分类宣传推广</li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="content">
    <div class="activity-info">
      <img src="../img/公益.png" alt="公益活动" class="gy">
      <div class="detail">
        <p><strong>活动地点：</strong>上海市浦东新区陆家嘴街道</p>
        <p><strong>活动时间：</strong>2025年6月15日 10:00-16:00</p>
        <p><strong>活动内容：</strong></p>
        <ul>
          <li>儿童图书馆志愿服务</li>
          <li>英语角交流活动</li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="content">
    <div class="activity-info">
      <img src="../img/公益.png" alt="公益活动" class="gy">
      <div class="detail">
        <p><strong>活动地点：</strong>广州市天河区体育中心</p>
        <p><strong>活动时间：</strong>2025年7月20日 08:00-18:00</p>
        <p><strong>活动内容：</strong></p>
        <ul>
          <li>马拉松赛事志愿服务</li>
          <li>医疗急救站协助</li>
        </ul>
      </div>
    </div>
  </div>
</div>
  </div>


</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
let router=useRouter()
function btnProfile(){
  router.push('/profile')
}
function btnList(){
  router.push('./activityList')
}
function btnDetail(){
  router.push('./activityDetail')
}
</script>
<style>
.all{
           display: flex;
            flex-direction: column;
            height: 100vh; /* 父容器高度为视口高度 */
            margin: 0;
            padding: 0;
}
.contents{
  display: flex;
  flex-direction: column;
  flex:1;
}
.gy{
  height: 50px;
  width: 50px;
  margin: 10px;
}
.top{
  /* background-color: rgb(127, 160, 202); */
  background-color: coral;
  height: 120px;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
  font-weight: 200;
  color: white;
}
.top2{
  height: 42px;
  border-bottom: 1px solid; 
  display: flex;
  position: relative;
}
.body{
  background-color: coral;
  height: 120px;
  padding: 10px;
}
.details{
  height: 50px;
  background-color: white;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
  position: absolute;
  top: -40px;
  display: flex;
  align-items: center;
  position: relative;
}
.g2{
  position: absolute;
  top:0px;
  right: 20px;
}
.taskList{
  height: 100px;
  background-color: white;
  width: 100%;
  border-radius: 5px;
  position: absolute;
  top: 20px;
  display: flex;
}
.tow{
  position: relative;
}
/* .content{
  background-color: rgb(163, 163, 154);
  height: 600px;
  width: 100%;
} */
.mg1{
  height: 50px;
  width: 50px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s, transform 0.3s;
  margin-left: 10px;
}

.mg2{
  height: 50px;
  width: 50px;
 ;
}
.mg2:hover{
  transform: translateY(-5px);
}
.mg3{
  height: 40px;
  width: 40px;
}
.mg3:hover{
  transform: translateY(-5px);
}
.my:hover{
  transform: translateY(-5px);
 color: rgb(218, 161, 87);
}
.my{
 
  background-color: transparent;
  margin-left: 20px;
  padding:0px ;
  
  border: none; /* 移除边框 */
  background: none; /* 移除背景 */
  color: inherit; /* 继承字体颜色 */
  font: inherit; /* 继承字体 */
  outline: none; /* 移除轮廓 */

}
.mg1:hover{
  transform: translateY(-5px);
 
}
/* .AllList{
  flex:1;
  flex-grow: 1;
  background-color: rgb(217, 238, 168);
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
} */
 .AllList{
  display: flex;
  align-items: center;
  width: 100%;
  
 }
.AllList img{
  height: 50px;
  width: 50px;
  
}
.AllList div{
  flex:1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center
}
.AllList div span{
  margin-top: 4px;
}
.content{
  height: auto;
  background-color: white;
  width: 100%;

  /* border-radius: 5px;
  position: absolute; */
  
  /* align-items: center; */
  background-color:white ;
  flex:1;
}

.top2 div{
  display: flex;
  flex:1;
}
.top2 div span{
  margin-top: 10px;
  margin-left: 12px;
}
.gd{
  justify-content: center;
  align-items: center;
}
.ck{
  position: absolute;
  right: 12px;
}
.ck input{
  color: green;
  font-size: medium;
}
.content input{
  border: none; /* 移除边框 */
  background: none; /* 移除背景 */
  border: none; /* 移除边框 */
 
}
.activity-info{
    border: solid 1px;
    margin: 10px;
    border-radius: 5px;
}

.detail p, .detail ul {
  margin: 10px 0; /* 上下10px，左右0 */
  padding: 0 15px; /* 上下0，左右15px */
  list-style-type: none;
}
</style>